<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/parkTemplate.xhtml"
                xmlns:p="http://primefaces.org/ui">

    <ui:param name="tab" value="reservation"/>
    <ui:define name="title">
        #{bundle['reservation.title']}
    </ui:define>
    <ui:define name="tab-content">

        <h:form>

            <p:growl id="growl" sticky="true" showDetail="true"/>

            <p:wizard widgetVar="wiz" flowListener="#{userWizard.onFlowProcess}" showStepStatus="false" backLabel="   #{bundle['reservation.button.back']}" nextLabel="   #{bundle['reservation.button.next']}" > 

                <p:tab id="st1" title="   #{bundle['reservation.tab1.title']}">
                    <script type="text/javascript">
                        PrimeFaces.locales['pl'] = {
                            closeText: 'Zamknij',
                            prevText: 'Poprzedni',
                            nextText: 'Następny',
                            currentText: 'Bieżący',
                            monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
                            monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
                            dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
                            dayNamesShort: ['Nie', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
                            dayNamesMin: ['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
                            weekHeader: 'Tydzień',
                            firstDay: 1,
                            yearSuffix: 'r',
                            timeOnlyTitle: 'Tylko czas',
                            timeText: 'Czas',
                            hourText: 'godz. ',
                            minuteText: 'min. ',
                            secondText: 'Sekunda',
                            currentText: 'Teraz',
                                    month: 'Miesiąc',
                            week: 'Tydzień',
                            day: 'Dzień',
                            allDayText: 'Cały dzień'
                        };
                    </script>

                    <p:panel header="#{bundle['reservation.tab1Title']}">

                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                            <h:outputText value="#{bundle['reservation.startDate']}" />
                            <p:calendar  required="true" value="#{userWizard.startDate}" locale="pl" pattern="dd/MM/yyyy HH:mm" > 

                                <p:clientValidator />  
                            </p:calendar>
                            <h:outputText value="#{bundle['reservation.endDate']}"  />
                            <p:calendar  required="true"  value="#{userWizard.endDate}" locale="pl" pattern="dd/MM/yyyy HH:mm" >

                                <p:clientValidator />  
                            </p:calendar>

                            <h:outputText value="#{bundle['passes.carType']}"/>  

                            <h:selectOneMenu required="true" value="#{userWizard.spaceType}" style="width: 100%;">  
                                <f:selectItem itemLabel="#{bundle['passes.choose']}"  itemValue=""/>  
                                <f:selectItem itemLabel="#{bundle['car.typePersonal']}" itemValue="Personal"/>  
                                <f:selectItem itemLabel="#{bundle['car.typeTrailer']}" itemValue="Trailer"/>  
                                <f:selectItem itemLabel="#{bundle['car.typeMotorcycle']}" itemValue="Motorcycle"/>  
                                <f:selectItem itemLabel="#{bundle['car.typeVan']}" itemValue="Van"  />  


                                <p:clientValidator /> 
                            </h:selectOneMenu>  
                        </h:panelGrid>

                    </p:panel>

                </p:tab>

                <p:tab id="st2" title="#{bundle['reservation.freePlaces']}">
                    <p:panel header="#{bundle['reservation.freePlaces']}">
                        <p:dataTable id="spaces" var="space" value="#{userWizard.avalivableSpaces}" rowKey="#{space.number}"
                                     selection="#{userWizard.selectedSpace}" selectionMode="single" emptyMessage="#{bundle['website.noRecordsFound']}" paginator="true" rowsPerPageTemplate="15" rows="15">
                            <f:facet name="header">
                                #{bundle['reservation.freePlacesInfo']}
                            </f:facet>
                            <p:column headerText="      #{bundle['reservation.spaceNumber']}">
                                #{space.number}
                            </p:column>

                            <p:column headerText="      #{bundle['reservation.spaceTypeInform']}">
                                #{userWizard.getSpaceLabelFromValue(space)}
                            </p:column>

                        </p:dataTable>


                    </p:panel>

                </p:tab>

                <p:tab id="st3" title= "#{bundle['reservation.tab1.title']}">

                    <p:panel header="#{bundle['reservation.tab2.title']}">
                        <p:selectOneButton value="#{userWizard.radioOptions}"  >  
                            <p:ajax event="change"  update="carbut"/>

                            <f:selectItem itemLabel="#{bundle['passes.choose']}" itemValue="1" />  
                            <f:selectItem itemLabel="#{bundle['passes.editCar_Title']}" itemValue="2" />   

                        </p:selectOneButton>  
                        <p:panel id="carbut">

                            <h:panelGrid  columns="2" cellpadding="2"  > 
                                <h:outputText value="#{bundle['website.chooseFromOptions']}" rendered="#{empty userWizard.radioOptions}"/>
                                <h:outputText id="tarriddf" value="#{bundle['passes.myCars']}"  rendered="#{userWizard.radioOptions.equals('1')}" />

                                <h:selectOneMenu value="#{userWizard.choosenCarId}"  rendered="#{userWizard.radioOptions.equals('1')}" style="width: 100%;">  

                                    <f:selectItems value="#{userWizard.carsByClientOptions}"  />  

                                </h:selectOneMenu>  


                                <h:outputText value="#{bundle['passes.numberPlate']}" rendered="#{userWizard.radioOptions.equals('2')}"  />  

                                <p:inputText value="#{userWizard.carPlate}" placeholder="#{bundle['passes.plateTip']}" rendered="#{userWizard.radioOptions.equals('2')}">
                                    <f:validateLength maximum="10" rendered="#{userWizard.radioOptions.equals('2')} "/>  
                                </p:inputText>

                                <h:outputText value="#{bundle['passes.make']}" rendered="#{userWizard.radioOptions.equals('2')}" />  

                                <p:inputText value="#{userWizard.carMake}" placeholder="#{bundle['passes.makeTip']}" rendered="#{userWizard.radioOptions.equals('2')}">
                                    <f:validateLength maximum="20"  rendered="#{userWizard.radioOptions.equals('2')}" />  
                                </p:inputText>

                                <h:outputText value="#{bundle['passes.model']}" rendered="#{userWizard.radioOptions.equals('2')}"/>  

                                <p:inputText value="#{userWizard.carModel}" placeholder="#{bundle['passes.modelTip']}" rendered="#{userWizard.radioOptions.equals('2')}">
                                    <f:validateLength maximum="50" rendered="#{userWizard.radioOptions.equals('2')}" />  
                                </p:inputText>
                                <h:outputText value="Rodzaj pojazdu:" rendered="#{userWizard.radioOptions.equals('2')}"/>  
                                <h:selectOneMenu rendered="#{userWizard.radioOptions.equals('2')}" required="true" value="#{userWizard.carType}" style="width: 100%;">  
                                    <f:selectItem itemLabel="#{bundle['passes.choose']}"  itemValue=""/>  
                                    <f:selectItem itemLabel="#{bundle['car.typePersonal']}" itemValue="Personal"/>  
                                    <f:selectItem itemLabel="#{bundle['car.typeTrailer']}" itemValue="Trailer"/>  
                                    <f:selectItem itemLabel="#{bundle['car.typeMotorcycle']}" itemValue="Motorcycle"/>  
                                    <f:selectItem itemLabel="#{bundle['car.typeVan']}" itemValue="Van"  />  


                                    <p:clientValidator /> 
                                </h:selectOneMenu>  
                            </h:panelGrid>
                        </p:panel>
                    </p:panel>
                </p:tab>


                <p:tab id="st4" title="#{bundle['reservation.AccountingData']}">
                    <p:panel header="#{bundle['reservation.AccountingData']}">




                        <p:selectOneButton value="#{userWizard.radioOptionsACC}">  
                            <p:ajax event="change"  update="buttons"/>
                            <f:selectItem itemLabel="#{bundle['reservation.acc.takeDataFromClientTable']}" itemValue="1" />  
                            <f:selectItem itemLabel="#{bundle['reservation.acc.selectAccounting']}" itemValue="2" />  
                            <f:selectItem itemLabel="#{bundle['reservation.acc.addNewData']}" itemValue="3" />  
                        </p:selectOneButton>  
                        <p:panel id="buttons">
                            <h:panelGrid  columns="2" cellpadding="2"> 

                                <br/>
                                <h:outputText value="#{bundle['website.chooseFromOptions']}" rendered="#{empty userWizard.radioOptionsACC}"/>
                                <h:outputText value="#{bundle['reservation.acc.takeDataFromClientTableExp']}" rendered="#{userWizard.radioOptionsACC.equals('1')}"/>
                                <p:commandButton id="basic" value="#{bundle['passes.choose']}" onclick="PF('dlg').show();" rendered="#{userWizard.radioOptionsACC.equals('2')}"/>
                                <p:commandButton id="newBtn" value="#{bundle['reservation.add']}" type="button" rendered="#{userWizard.radioOptionsACC.equals('3')}" />  
                            </h:panelGrid>
                        </p:panel>
                        <p:overlayPanel id="nAcc" for="newBtn" hideEffect="fade" dynamic="true">  
                            <h:panelGrid columns="3" cellpadding="10">   


                                <h:outputText value="#{bundle['accounting.name']}" />  
                                <p:inputText id="na" value="#{userWizard.accName}" >  
                                    <f:validateLength minimum="2" maximum="255" />  
                                    <p:ajax update="msgNam" event="keyup" />  
                                </p:inputText>
                                <p:message for="na" id="msgNam" display="icon"/> 


                                <h:outputText value="#{bundle['accounting.city']}" />  
                                <p:inputText id="cit" value="#{userWizard.accCity}" >  
                                    <f:validateLength minimum="2" maximum="255" />  
                                    <p:ajax update="msgCit" event="keyup" />  
                                </p:inputText>
                                <p:message for="cit" id="msgCit" display="icon"/>  

                                <h:outputText value="#{bundle['accounting.zip']}" />  
                                <p:inputText id="zips" value="#{userWizard.accZip}" >  
                                    <f:validateLength minimum="2" maximum="15" />  
                                    <p:ajax update="msgZip" event="keyup" />  
                                </p:inputText>
                                <p:message for="zips" id="msgZip" display="icon"/>  

                                <h:outputText value="#{bundle['accounting.street']}" />  
                                <p:inputText id="str" value="#{userWizard.accStreet}" >  
                                    <f:validateLength minimum="2" maximum="255" />  
                                    <p:ajax update="msgSt" event="keyup" />  
                                </p:inputText>
                                <p:message for="str" id="msgSt" display="icon"/> 

                                <h:outputText value="#{bundle['accounting.house']}" />  
                                <p:inputText id="hou" value="#{userWizard.accHouse}" >  
                                    <f:validateLength minimum="2" maximum="15" />  
                                    <p:ajax update="msgH" event="keyup" />  
                                </p:inputText>
                                <p:message for="hou" id="msgH" display="icon"/> 

                                <h:outputText value="#{bundle['accounting.local']}" />  
                                <p:inputText id="loc" value="#{userWizard.accLocal}" >  
                                    <f:validateLength minimum="2" maximum="15" />  
                                    <p:ajax update="msgLoc" event="keyup" />  
                                </p:inputText>
                                <p:message for="loc" id="msgLoc" display="icon"/> 

                                <h:outputText value="#{bundle['accounting.nip']}" />  
                                <p:inputText id="nip" value="#{userWizard.accNip}" >  
                                    <f:validateLength minimum="2" maximum="13" />  
                                    <p:ajax update="msgNip" event="keyup" />  
                                </p:inputText>
                                <p:message for="nip" id="msgNip" display="icon"/> 

                                <h:outputText value="#{bundle['accounting.phone']}" />  
                                <p:inputText id="pho" value="#{userWizard.accPhone}" >  
                                    <f:validateLength minimum="2" maximum="15" />  
                                    <p:ajax update="msgPhon" event="keyup" />  
                                </p:inputText>
                                <p:message for="pho" id="msgPhon" display="icon"/> 

                                <h:outputText value="#{bundle['accounting.type']}"/>  
                                <h:selectOneMenu value="#{userWizard.accPayerType}" style="width: 100%;">  

                                    <f:selectItems value="#{accountingDataBean.payerOptions}"  />  

                                </h:selectOneMenu>  

                            </h:panelGrid>
                        </p:overlayPanel>  





                        <p:dialog header="#{bundle['reservation.myData']}" widgetVar="dlg" >

                            <p:outputPanel id="acch" style="text-align:center;">


                                <p:dataTable var="acc" value="#{accountingDataBean.allByClient}" id="acList" style="font-size: 12px; width: 800px;" emptyMessage="#{bundle['website.noRecordsFound']}" rowKey="#{acc.name}"
                                             selection="#{userWizard.selectedAcc}" selectionMode="single" >

                                    <p:ajax event="rowSelect" oncomplete="PF('dlg').hide();"/>

                                    <p:column headerText="#{bundle['accounting.name']}">
                                        #{acc.name}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.city']}">
                                        #{acc.city}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.zip']}" >
                                        #{acc.zipNumber}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.street']}">
                                        #{acc.street}
                                    </p:column>
                                    <p:column headerText="#{bundle['accounting.house']}">
                                        #{acc.houseNumber}
                                    </p:column>
                                    <p:column headerText="#{bundle['accounting.local']}">
                                        #{acc.localNumber}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.nip']}">
                                        #{acc.nipNumber}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.phone']}">
                                        #{acc.phone}
                                    </p:column>

                                    <p:column headerText="#{bundle['accounting.type']}">
                                        #{accountingDataBean.getLabelFromPayerValue(acc)}
                                    </p:column>




                                </p:dataTable>
                            </p:outputPanel>
                        </p:dialog>



                    </p:panel>
                </p:tab>
                <p:tab id="st5" title="#{bundle['reservation.confirmation']}">
                    <p:panel header="#{bundle['reservation.confirmation']}">

                        <h:panelGrid columns="3" columnClasses="passwordChanged, passwordChanged, passwordChanged">
                            <p:panel header="#{bundle['reservation.pass']}" style="height: 100%">

                                <h:panelGrid columns="2" cellpadding="10">   

                                    <h:outputLabel value="#{bundle['reservation.space']}"/>
                                    <h:outputText value="#{userWizard.selectedSpace.number}"/> 
                                    <h:outputLabel value="#{bundle['reservation.from']}"/>
                                    <h:outputText value="#{userWizard.startDateForUser}"/> 
                                    <h:outputLabel value="#{bundle['reservation.to']}"/>
                                    <h:outputText value="#{userWizard.endDateForUser}"/> 

                                </h:panelGrid>
                            </p:panel>               



                            <p:panel header="#{bundle['reservation.car']}" style="height: 100%">
                                <h:panelGrid columns="2" cellpadding="10">   

                                    <h:outputLabel value="#{bundle['passes.make']}" />  
                                    <h:outputText value="#{userWizard.addedCar.make}" />  

                                    <h:outputLabel value="#{bundle['passes.model']}" />  
                                    <h:outputText value="#{userWizard.addedCar.model}"/>  


                                    <h:outputLabel value="#{bundle['passes.numberPlate']}" />  
                                    <h:outputText value="#{userWizard.addedCar.numberPlate}"/> 
                                    <h:outputLabel value="#{bundle['passes.carType']}" />  
                                    <h:outputText value="#{userWizard.carTypeForUser}"/>  
                                </h:panelGrid>
                            </p:panel>



                            <p:panel header="#{bundle['reservation.billFor']}">
                                <h:panelGrid columns="2" cellpadding="10">   

                                    <h:outputLabel value="#{bundle['accounting.name']}" />  
                                    <h:outputText value="#{userWizard.addedAccountingData.name}" />  

                                    <h:outputLabel value="#{bundle['accounting.city']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.city}"/>  

                                    <h:outputLabel value="#{bundle['accounting.zip']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.zipNumber}"/>

                                    <h:outputLabel value="#{bundle['accounting.street']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.street}"/>

                                    <h:outputLabel value="#{bundle['accounting.house']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.houseNumber}"/>

                                    <h:outputLabel value="#{bundle['accounting.local']}" />  
                                    <h:outputText value="#{userWizard.addedAccountingData.localNumber}"/>

                                    <h:outputLabel value="#{bundle['accounting.nip']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.nipNumber}"/>

                                    <h:outputLabel value="#{bundle['accounting.phone']}"  />  
                                    <h:outputText value="#{userWizard.addedAccountingData.phone}"/>

                                    <h:outputLabel value="#{bundle['accounting.type']}"  />  
                                    <h:outputText value="#{userWizard.payerTypeForUser}"
                                                  />
                                </h:panelGrid>
                            </p:panel>
                        </h:panelGrid>
                        <p:commandButton value="Zatwierdź" actionListener="#{userWizard.addReservation}" id="withIcon" style="width: 100%;" 
                                         update="growl" oncomplete="wiz.loadStep(wiz.cfg.steps[0], true) {}"      icon="ui-icon-disk">
                            <p:fileDownload value="#{userWizard.file}" />  
                            </p:commandButton>  
                        <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">  
                            <p:graphicImage value="/design/ajaxloadingbar.gif" />  
                        </p:dialog>  

                        <script type="text/javascript">
                                        function start() {
                                            PF('statusDialog').show();
                                        }

                                        function stop() {
                                            PF('statusDialog').hide();
                                        }
                        </script>
                    </p:panel>
                </p:tab>


            </p:wizard>

        </h:form>

    </ui:define>
</ui:composition>